<template>
  <div class="app-container">
    <!--  上面刷选  -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="状态" prop="usersUseFlag">
        <el-select v-model="statusValue" placeholder="请选择">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker v-model="daterangeUsersCreateTime" style="width: 240px" value-format="yyyy-MM-dd"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  隐藏  -->
    <el-row v-show="false" :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini"
                   @click="handleExport" v-hasPermi="['service:users:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>
    </el-row>
    <!-- *****列表******* -->
    <el-table v-loading="loading" :data="usersList" @selection-change="handleSelectionChange">
      <!--        <el-table-column type="selection" width="55" align="center"/>  勾选-->
      <el-table-column type="index" width="50"/>
      <el-table-column label="状态" width="100" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.service_yes_no" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" width="100" align="center" prop="usersId"/>
      <el-table-column label="姓名" align="center" prop="name"/>
      <el-table-column label="手机号" align="center" prop="telephone"/>
      <el-table-column label="注册时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近访问时间" align="center" prop="currentTime" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.currentTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下单量" width="100" align="center" prop="orderCount">
        <template slot-scope="scope">
          <el-button size="medium" type="text" @click="gotoOrderList(scope.row)" style="color: #0979DE"
          >{{ scope.row.orderCount }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="medium" type="text" icon="el-icon-edit"
                     @click="handleUserDetail(scope.row)" v-hasPermi="['service:users:edit']"
          >详情
          </el-button>
          <el-button v-if="scope.row.status==='锁定'" size="medium" type="text" style="color: #0979DE"
                     @click="showUnLockDialog(scope.row)" v-hasPermi="['service:users:remove']"
          >解锁用户
          </el-button>
          <el-button v-else size="medium" type="text" style="color: #FB7D00"
                     @click="showLockDialog(scope.row)" v-hasPermi="['service:users:remove']"
          >锁定用户
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  列表底部页码  -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page"
                :limit.sync="queryParams.size" @pagination="getList"
    />
    <!-- 锁定用户Dialog   -->
    <el-dialog title="锁定用户" :visible.sync="lockVisibleDialog">
      <el-form :model="form">
        <el-form-item label="锁定原因">
          <el-select v-model="form.reasonId" placeholder="请选择活动区域">
            <el-option v-for="item in lockReasons" :key="item.id" :label="item.reason" :value="item.reason">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补充说明">
          <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容" autocomplete="off">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="lockVisibleDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleLockUser()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 解锁用户Dialog   -->
    <el-dialog title="确定解锁该用户？" :visible.sync="unLockVisible" width="30%">
      <span>用户账号被解锁后将恢复下单、评价，是否继续？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="unLockVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUnLockUser()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <div style="display: flex;background: #F2F3FF;justify-content: center;flex-direction: row;align-items: center">
        <!--        <el-avatar class="avatarImg"  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" @error="errorHandler"></el-avatar>-->
        <img class="avatarImg" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></img>
        <el-form ref="form" :model="form" size="small" class="cUserFromItem" label-width="100px">
          <el-form-item label="用户ID" prop="usersId" style="color: #BBBBBB">
            <input v-model="form.usersId" placeholder="请输入身份证号" class="inputTran"/>
          </el-form-item>
          <el-form-item label="姓名" prop="name" style="color: #BBBBBB">
            <input v-model="form.name" placeholder="请输入姓名" class="inputTran"/>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone" style="color: #BBBBBB">
            <input v-model="form.telephone" placeholder="请输入手机号/账号" class="inputTran"/>
          </el-form-item>
          <el-form-item label="注册时间" prop="createTime">
            <!--          <el-date-picker clearable v-model="form.createTime" type="date" value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择创建时间" />-->
            <input v-model="form.createTime" placeholder="注册时间" class="inputTran"/>
          </el-form-item>
          <el-form-item label="最近访问时间" prop="currentTime">
            <input v-model="form.currentTime" placeholder="最近访问时间" class="inputTran"/>
          </el-form-item>

        </el-form>
      </div>

      <!--   操作日志   -->
      <el-button size="medium" type="text" style="color: #000000;font-weight: bold ;margin-top: 20px"
                 v-hasPermi="['service:users:edit']"
      >操作日志
      </el-button>
      <el-table ref="tables" :data="logininfolist" @selection-change="handleSelectionChange"
                :default-sort="defaultSort"
      >
        <!--        <el-table-column type="selection" width="55" align="center"/>  勾选-->
        <el-table-column type="index" width="50"/>
        <el-table-column label="操作日期" align="center" prop="actDate"/>
        <el-table-column label="操作时间" align="center" prop="actTime"/>
        <el-table-column label="操作" align="center" prop="action"/>
        <el-table-column label="原因（说明）" align="center" prop="reason"/>
        <!--        <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true"/>-->
        <el-table-column label="操作人" align="center" prop="actor" :show-overflow-tooltip="true"/>
      </el-table>
      <div slot="footer" align="center" class="dialog-footer">
        <!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
        <el-button size="medium" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listUsers,
  getUsers,
  delUsers,
  addUsers,
  updateUsers,
  getLockReason,
  userLock,
  userUnlock, getUserDetail
} from '@/api/service/users'
import router from '@/router'
import { list } from '@/api/monitor/logininfor'

export default {
  name: 'Users',
  dicts: ['service_yes_no'],
  data() {
    return {
      logininfolist: [],
      logintotal: 0,
      // 默认排序
      defaultSort: { prop: 'loginTime', order: 'descending' },
      lockVisibleDialog: false,
      unLockVisible: false,
      curUsersIds: '',
      statusOptions: [{
        value: '',
        label: '全部'
      }, {
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '锁定'
      }],
      statusValue: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户账号表表格数据
      usersList: [],
      // 弹出层标题
      title: '用户详情',
      // 是否显示弹出层
      open: false,
      daterangeUsersCreateTime: [],
      // 查询参数
      queryParams: {
        page: 1,
        size: 10,
        name: null,
        orderDesc: null,
        createTime: null
      },
      lockReasons: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        usersIdnumber: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '手机号/账号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getLockReason()
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        usersId: null,
        name: null,
        usersIdnumber: null,
        telephone: null,
        nursePassword: null,
        orderDesc: null,
        nurseSex: null,
        nurseAvatar: null,
        currentTime: null,
        createTime: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.usersId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    //锁定原因
    getLockReason() {
      getLockReason({}).then((res) => {
        this.lockReasons = res.data
      })
    },
    /** 查询用户账号表列表 */
    getList() {
      this.loading = true
      this.queryParams.params = {}
      this.queryParams.labelStatus = this.statusValue
      if (null != this.daterangeUsersCreateTime && '' !== this.daterangeUsersCreateTime) {
        this.queryParams.beginTime = this.daterangeUsersCreateTime[0]
        this.queryParams.endTime = this.daterangeUsersCreateTime[1]
      }
      //后台从0开始 改变一下
      let params={...this.queryParams}
      let p = params.page
      params.page = p > 0 ? p - 1 : p
      listUsers(params).then(response => {
        this.usersList = response.data.content
        this.total = response.data.totalElements //测试
        this.loading = false
      })
    },
    /* 点击锁定用户 */
    showLockDialog(row) {
      console.log(row.status)
      this.lockVisibleDialog = true
      this.curUsersIds = row.usersId
    },
    /* 点击解锁用户 */
    showUnLockDialog(row) {
      console.log(row.status)
      this.unLockVisible = true
      this.curUsersIds = row.usersId
    },
    /* 跳转订单 */
    gotoOrderList(row) {
      const curUsersIds = row.usersId
      this.$router.push({//service/orders/index
        path: '/serviceOrder/orders' //表里维护
        // params: JSON.parse({ userId: curUsersIds })
      })
    },
    /** 详情 */
    handleUserDetail(row) {
      this.reset()
      const params = { 'userId': row.usersId }
      getUserDetail(params).then(response => {
        this.form = response.data
        let logs = response.data.log
        this.logininfolist = logs || []
        this.logintotal = logs ? logs.length : 0
        this.open = true
        this.title = '用户详情'
      })
    },
    /** 锁定 */
    handleLockUser(row) {
      this.lockVisibleDialog = false
      let reasonId = ''
      for (let itm of this.lockReasons) {
        if (itm.reason == this.form.reasonId) {
          reasonId = itm.id
        }
      }
      const params = {
        'userId': this.curUsersIds,
        'reasonId': reasonId,
        'remark': this.form.remark
      }
      userLock(params).then(() => {
        this.handleQuery()
        this.$modal.msgSuccess('操作成功')
      }).catch(() => {
      })
    },
    /** 解锁 */
    handleUnLockUser(row) {
      this.unLockVisible = false
      const params = {
        'userId': this.curUsersIds
      }
      userUnlock(params).then(() => {
        this.handleQuery()
        this.$modal.msgSuccess('操作成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('service/users/export', {
        ...this.queryParams
      }, `users_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
<style>
.cUserFromItem {
  display: flex;
  flex-wrap: wrap;
  background: #F2F3FF;
  color: #00000000;
  padding: 10px 6px;
  flex-grow: 3;
}

.inputTran {
  background: transparent;
  border: transparent;
}

.element {
  width: 200px; /* 确保有足够的宽度 */
  height: 200px; /* 确保有足够的高度 */
  box-sizing: border-box; /* 确保边框包含在宽度和高度内 */
  overflow: visible; /* 确保内容溢出时可见 */
  border: 2px solid #000; /* 边框 */
  border-radius: 50px; /* 圆角 */
}

/*
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。
*/
.avatarImg {
  width: 60px;
  height: 60px;
  margin-left: 10px;
  box-sizing: border-box; /* 确保边框包含在宽度和高度内 */
  //overflow: visible; /* 确保内容溢出时可见 */
  //border: 2px solid #000; /* 边框 */
  border-radius: 50px; /* 圆角 */
}

.el-form-item__label {
  color: #BBBBBB !important;
}
</style>
